<%--
  Created by IntelliJ IDEA.
  User: liujie
  Date: 2016/8/18
  Time: 11:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>${exam.name}</title>
    <link rel="stylesheet" href="<c:url value='/resource/exam/css/main.css'></c:url>">
    <link rel="stylesheet" href="<c:url value='/resource/exam/css/frozen.css'></c:url>">
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            background-color: #FFFFFF
        }
        .ui-checkbox input:checked:before, .ui-checkbox-s input:checked:before{color: #dd4b4b;}
        .ui-tiled li i {
            line-height: 35px;
        }
    </style>

    <script language="JavaScript" src="<c:url value='/resource/js/jquery-2.0.min.js'/>"></script>
    <script language="JavaScript" src="<c:url value='/resource/exam/js/timer.js'/>"></script>
</head>

<body ontouchstart>
<%--<header class="ui-header ui-header-positive" style="background: #333;">
    <i class="ui-icon-return" onclick="history.back()"></i>
    <h1>${exam.name}</h1>
</header>--%>
<section class="ui-container" style="background: #FFFFFF;">
    <div class="mnks_top">
        <div class="mnks_top_lf">
            <div class="time">
                <div class="time_fen">
                    <b id="min_label">00</b><br />分
                </div>
                <div class="time_mao">
                    :
                </div>
                <div class="time_fen">
                    <b id="sec_label">00</b><br />秒
                </div>
                <p class="p">考试结束倒计时</p>
            </div>
        </div>
        <div class="mnks_top_rt">
            <div class="fs">
                <h3>${count}</h3>
                <p>总题数</p>
            </div>
        </div>
        <div class="dt" id="pageDesc">
            开始答题咯
        </div>
    </div>

    <%--按钮--%>
    <div id="action_div" class="demo-item" style="margin-top: 15px; padding-bottom: 25px;">
        <div class="demo-block">
            <ul class="ui-tiled">
                <li>
                    <div>
                        <a href="javascript:gotoLastQuestion();" class="mnks_but red">上一题</a>
                    </div><i>&nbsp;</i>
                </li>
                <li>
                    <div>
                        <a href="javascript:gotoNextQuestion();" class="mnks_but red">下一题</a>
                    </div><i>&nbsp;</i>
                </li>
                <li>
                    <div>
                        <a href="#" class="mnks_but green" id="submit">交&nbsp;卷</a>
                    </div><i>&nbsp;</i>
                </li>
            </ul>
        </div>
    </div>
    <div class="mnks_bot">
    </div>

    <!--答案-->
    <div class="mnks_mask"></div>
    <div class="mnks_da">
        <div class="mnks_da_top">
            <div class="mnks_da_top_lf">
                <div class="fs">
                    <h3 id="goals">60</h3>
                    <p>分数</p>
                </div>
            </div>

            <div class="mnks_da_top_rt">
                <ul class="da">
                    <li>
                        <div class="top">
                            ${count}
                        </div>
                        <p class="p">
                            答题
                        </p>
                    </li>
                    <li>
                        <div class="top" id="correct_num">
                            40
                        </div>
                        <p class="p">
                            答对
                        </p>
                    </li>
                    <li>
                        <div class="top yellow">
                            <a href="javascript:gotoFaults();" id="incorrect_num">60</a>
                        </div>
                        <p class="p">
                            <a href="javascript:gotoFaults();">答错</a>
                        </p>
                    </li>
                </ul>
            </div>

            <div class="dt">
                考试时间到
            </div>
            <div class="img">
            </div>

        </div>
        <div class="mnks_da_mid">
            荣获【学渣】的牛逼称号<br />老师都被你气吐血了
        </div>

        <a href="javascript:gotoFaults();" class="mnks_da_but red">错题解析</a>

    </div>
</section>

<script type="text/javascript">
    var examName = "${exam.name}";
    var questions = ${questionList};
    var question_index = 0;
    //上一题
    function gotoLastQuestion(){
        question_index--;
        if(question_index < 0){
            alert("没有上一题了！");
            question_index++;
        }else{
            $(".question_div").hide();
            $("#question_div_"+question_index).show();
        }
    }
    //下一题
    function gotoNextQuestion(){
        checkAnswer(question_index);
        question_index++;
        if(question_index < questions.length){
            $(".question_div").hide();
            if($("#question_div_"+question_index).length>0){
                $("#question_div_"+question_index).show();
            }else{
                addOneQuestion(questions[question_index],question_index);
            }
        }else{
            question_index--;
            alert("没有下一题了，请交卷！");
        }

    }

    //交卷
    function submitExam(){
        stopTime();
        checkAnswer(question_index);
        var goals = 0;
        var correct_num = 0;
        for(var i=0;i<questions.length;i++){
            if(questions[i].iscorrect){
                goals = goals + questions[i].goals;
                correct_num = correct_num + 1;
            }
        }
        var incorrect_num = questions.length - correct_num;
        $("#goals").html(goals);
        $("#correct_num").html(correct_num);
        $("#incorrect_num").html(incorrect_num);
        $(".mnks_mask").show();
        $(".mnks_da").show();
    }

    //添加一题
    function addOneQuestion(question,index){
        var questionStartModel = '<div id="question_div_$1" class="question_div"><div class="mnks_mid"><h3>题号<span>$2</span>$3</h3><p>$4</p><p>$5</p></div>'
                +'<div class="demo-item"><div class="demo-block"><div class="ui-form ui-border-t">';
        var questionEndModel = '</div></div></div></div>';
        var checkOptionModel = '<div class="ui-form-item ui-form-item-checkbox"><label class="ui-checkbox"><input type="checkbox" name="option_$1" value="$2" /></label><p>$3</p><div class="ctjx_absolute">$4</div></div>';
        var radioOptionModel = '<div class="ui-form-item ui-form-item-radio"><label class="ui-radio" for="radio"><input type="radio" name="option_$1"  value="$2" /></label><p>$3</p><div class="ctjx_absolute">$4</div></div>';
        var judgeOptionModel = '<div class="ui-form-item ui-form-item-radio"><label class="ui-radio" for="radio"><input type="radio" name="option_$1"  value="$2" /></label><p>$3</p><div class="ctjx_absolute">$4</div></div>';
        var AnswerModel = '<p class="ctjx">正确答案：$1</p>';

        var options = question.options;
//        var optionIndexs = ['A','B','C','D','E','F','G'];
        var questionHtml = '';
        if(question.type=='2'){
            questionHtml = questionStartModel.replace('$1',index).replace('$2',index+1).replace('$3','（多选题）').replace('$4',question.title).replace('$5',getImgHtml(question));
            for(var i=0;i<options.length;i++) {
                questionHtml = questionHtml + checkOptionModel.replace('$1', index).replace('$2', options[i].label).replace('$3', options[i].label + ' . ' + options[i].name).replace('$4',getImgHtml(options[i]));
            }
        }else if(question.type=='1'){
            questionHtml = questionStartModel.replace('$1',index).replace('$2',index+1).replace('$3','（单选题）').replace('$4',question.title).replace('$5',getImgHtml(question));
            for(var i=0;i<options.length;i++) {
                questionHtml = questionHtml + radioOptionModel.replace('$1', index).replace('$2', options[i].label).replace('$3', options[i].label + ' . ' + options[i].name).replace('$4',getImgHtml(options[i]));
            }
        }else{
            questionHtml = questionStartModel.replace('$1',index).replace('$2',index+1).replace('$3','（判断题）').replace('$4',question.title).replace('$5',getImgHtml(question));
            for(var i=0;i<options.length;i++) {
                questionHtml = questionHtml + judgeOptionModel.replace('$1', index).replace('$2', options[i].label).replace('$3', options[i].label + ' . ' + options[i].name).replace('$4',getImgHtml(options[i]));
            }
        }
        questionHtml = questionHtml + AnswerModel.replace('$1',question.answer);
        questionHtml = questionHtml + questionEndModel;
        $("#action_div").before(questionHtml);
    }

    //准备图片
    function getImgHtml(object){
        var imgModel = '<img src="<c:url value='/api/exam/image/$1'/>" />';
        if(object.attach==null||object.attach.length==0){
            return '';
        }else{
            return imgModel.replace('$1',object.attach[0].id);
        }
    }

    //jquery获取复选框值
    function getCheckedValues(name){
        var chk_value =[];
        $('input[name="'+name+'"]:checked').each(function(){
            chk_value.push($(this).val());
        });
        return chk_value;
    }

    //判断答案正确性
    function checkAnswer(index){
        var user_ans = getCheckedValues('option_'+index);
        var correct_ans  = questions[index].answer.split(',');
        if(user_ans.sort().toString()==correct_ans.sort().toString()){
            questions[index].iscorrect = true;
            $("#question_div_"+index).attr("class","question_div correct_question");
        }else{
            questions[index].iscorrect = false;
        }
    }

    //错题解析
    function gotoFaults(){
        for(var i=question_index;i<questions.length;i++){
            if($("#question_div_"+i).length==0){
                addOneQuestion(questions[i],i);
            }
        }
        $(".mnks_mask").hide();
        $(".mnks_da").hide();
        $("#pageDesc").html("错题解析");
        $("#action_div").hide();
        $(".ctjx").show();
        $(".question_div").show();
        $(".correct_question").hide();
    }

    $(function(){
        $("#submit").click(function(){
            submitExam();
        });

        if(questions!=null&&questions.length>0){
//            console.log(questions);
            addOneQuestion(questions[0],0);
        }

        startTimer(parseInt(${exam.timelength})*60*1000);//开始倒计时
    });
</script>
</body>

</html>
